<template>
    <div>
        <div class="head">
            <div class="userinfo">
                <div class="userdetail">
                    <div class="imgbox">
                        <img src="	https://www.sonkwo.cn/36799ad46eeb1c08e0cc3c05a1a870a2.png" width="70.4px"
                            height="70.4px" alt="">
                        <img src="../assets/img/photo.jpg" width="44x" height="44px" alt="">
                    </div>
                    <div class="name">
                        <p>{{ userName }} <span></span></p>
                        <p>普通玩家</p>
                    </div>
                    <div class="user">
                        <p>个人主页></p>
                        <p>已签到</p>
                    </div>
                </div>
                <div class="money">
                    <p>积分: 1</p>
                    <p><span></span>果币：0.0</p>
                    <p>做任务赚积分>></p>
                </div>
            </div>
        </div>
        <div class="usemessage" style="   border-bottom: 1px solid #f5f5f5;">
            <p>消息中心</p>
            <p style=" font-size: 13px; color: #999999;">果友互动,降价促销<span>></span></p>
        </div>
        <div class="usemessage">
            <p>点评</p>
            <p>></p>
        </div>
        <div class="user-setting-category">
            <div class="category-item"><img src="https://www.sonkwo.cn/f09ec908679f3a9ed4108e1d11cfc889.png" alt="">
                <router-link to="/myOrder">
                    <p>订单</p>
                </router-link>
            </div>
            <div class="category-item"><img src="https://www.sonkwo.cn/357677beb83e1f7326cb824594805de5.png" alt="">
                <p>激活码</p>
            </div>
            <div class="category-item"><img src="https://www.sonkwo.cn/f32df5fae4a3bac0027ba74d580670f0.png" alt="">
                <p>心愿单</p>
            </div>
            <div class="category-item"><img src="https://www.sonkwo.cn/207b512a531d0f6b76c1a7432731d445.png" alt="">
                <p>优惠券</p>
            </div>
            <div class="category-item"><img src="https://www.sonkwo.cn/142503df953f4481fdff6b789e9420b0.png" alt="">
                <p>果贴</p>
            </div>
            <div class="category-item"><img src="https://www.sonkwo.cn/9326163699b9e3c5bed3955d7aae97dc.png" alt="">
                <p>小组</p>
            </div>
            <div class="category-item"><img src="	https://www.sonkwo.cn/45689f0f1d1434bc0e8280b208ffa85e.png" alt="">
                <p>基本信息</p>
            </div>
            <div class="category-item"><img src="https://www.sonkwo.cn/41f674d1d7fe667ccfc4f8985467408a.png" alt="">
                <p>账号安全</p>
            </div>
            <div class="category-item"><img src="https://www.sonkwo.cn/5f450643997c0d26fc26d1ee131d31cb.png" alt="">
                <p>收货地址</p>
            </div>
            <div class="category-item"><img src="	https://www.sonkwo.cn/fc7a0f92436780caf703c79e7b166e90.png" alt="">
                <p>钱包</p>
            </div>
        </div>
        <fotter-bar></fotter-bar>
    </div>
</template>
<style lang="scss" scoped>
.user-setting-category {
    display: flex;
    flex-wrap: wrap;
    align-items: center;


    .category-item {

        width: 25%;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
            width: 30px;
            height: 30px;
        }
    }
}

.usemessage {
    padding: 10px 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 15px solid #f5f5f5;

    p {


        span {
            margin-left: 20px;
            font-size: 14px;
            color: black;
        }
    }
}

.head {
    width: 100%;
    height: 160px;
    background: linear-gradient(rgb(51, 51, 51), rgba(51, 57, 77, 0.98));
    position: relative;
    z-index: 3;

    .userinfo {
        padding: 20px 25px;
        display: flex;
        flex-direction: column;

        .money {
            display: flex;
            margin-top: 35px;
            // justify-content: space-between;

            p {
                font-size: 13px;

                &:nth-child(1) {
                    color: #ff5722;
                    margin-right: 30px;

                }

                &:nth-child(2) {
                    color: #fff;
                    display: flex;
                    align-items: center;
                }

                &:nth-child(3) {
                    color: #999999;
                    margin-left: 80px;
                }

                span {
                    width: 16px;
                    height: 16px;
                    display: inline-block;
                    background-image: url(https://www.sonkwo.cn/d98c608f9ba1526d3bf223efd513eb27.png);
                    background-size: contain;
                }
            }
        }

        .userdetail {

            display: flex;
            align-items: center;

            .user {
                p {
                    color: #cccccc;

                    &:nth-child(2) {
                        color: #999999;
                        margin-top: 20px;
                        border: 1px solid #999999;
                        text-align: center;
                        border-radius: 10px;
                        font-size: 13px;
                    }
                }
            }



            .name {
                flex: 1;
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                color: white;
                height: 55px;

                p {
                    display: flex;
                    align-items: center;

                    &:nth-child(2) {
                        font-size: 13px;
                        color: #999999;
                    }

                    span {
                        margin-left: 10px;
                        display: inline-block;
                        width: 20px;
                        height: 15px;
                        background-image: url(https://www.sonkwo.cn/a0002f8a9ae35087df211c43dbb6a263.png);
                        background-size: contain;
                    }
                }
            }

            .imgbox {
                display: flex;
                position: relative;

                img {
                    &:nth-child(1) {
                        position: relative;
                        z-index: 2;
                    }

                    &:nth-child(2) {
                        position: absolute;
                        top: 13px;
                        right: 14px;
                        border-radius: 999px;
                    }
                }
            }

        }
    }
}
</style>
<script>

import fotterBar from '../components/fotterBar.vue'
export default {
    data() {
        return {
            userName: null,//用户名
        }
    }, methods: {
        change() {
            this.$store.commit('change', true)
        }
    }, components: {
        fotterBar
    }, created() {
        // 获取用户名
        this.userName = JSON.parse(window.localStorage.getItem('user'));
        this.userName = this.userName.phone
    }
}
</script>